/**
 * useReducer 和 redux 中 reducer 很像
   useState 内部就是靠 useReducer 来实现的
   useState 的替代方案，它接收一个形如 (state, action) => newState 的 reducer，
   并返回当前的 state 以及与其配套的 dispatch 方法
   在某些场景下，useReducer 会比 useState 更适用，
   例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等
 */
import React, { useReducer } from 'react';
import { Button } from 'antd-mobile';

function ReducerCom() {
  function reducer(state: any, action: any) {
    console.log('reducer函数', state, action);
    switch (action.type) {
      case 'increment':
        return { number: state.number + 1 };
      case 'decrement':
        return { number: state.number - 1 };
      default:
        throw new Error();
    }
  }
  const [state, dispatch] = useReducer(reducer, { number: 0 });
  /**
   *  useReducer第一个参数是对事件的触发作响应的函数，第二个参数是数据的初始值，
   *  数组结构 state就是useReducer的第二个参数
   *          dispatch依靠传入的参数做判断对其作出响应
   *
   */
  return (
    <div>
      <Button onClick={() => dispatch({ type: 'increment' })}>{state.number}</Button>
    </div>
  );
}
export default ReducerCom;
